//引入iconfont图标链接
	@import '//at.alicdn.com/t/font_3122992_a2kza1z541p.css';

	@font-face {
		font-family: 'webfont';
		font-display: swap;
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot');
		/* IE9*/
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot?#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff2') format('woff2'),
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff') format('woff'),
			/* chrome、firefox */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.ttf') format('truetype'),
			/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.svg#NotoSansHans-Black') format('svg');
		/* iOS 4.1- */
	}

	.web-font {
		font-family: "webfont" !important;
		font-size: 15px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	@fullWidth: 100%;
	@fullHeight: 100%;

	.seticonColor(@color) {
		cursor: pointer;

		&:hover {
			color: @color;
			opacity: 0.7;
		}
	}

	.icon {
		&.black {
			.seticonColor(gray);
		}

		&.blue {
			.seticonColor(deepskyblue);
		}
	}

	.flexLayout {
		display: flex;
		flex-direction: row;
	}

	.PositionLayout(@childLayout) {
		position: @childLayout;
	}

	.line {
		width: 1px;
		height: 1.25rem;
		margin-left: 0.8rem;
		padding-right: 5%;
		background-color: #E8E8E8;
	}

	#index {
		width: @fullWidth;
		height: auto;
		// background-color: green;
		left: 0px;
		top: 0px;
		.PositionLayout(absolute);
		.flexLayout;
		background-color: var(--color-bg-5);
		color: var(--color-text-1);
		//overflow-y: hidden;

		#topbar {
			height: @fullHeight;
			margin-left: 4%;
			// background-color: red;
			.PositionLayout(relative);
			.flexLayout;

			#topbar-leftnav {
				width: 25%;
				height: @fullHeight;
				// background-color: skyblue;
				transform: translateX(37%);
				padding-right: 2%;
				.PositionLayout(relative);

				a {
					text-decoration: none;
					color: var(--color-content-a, '#4c4c4c');

					&:hover {
						color: orangered;
					}
				}
			}

			#topbar-rightnav {
				width: 30%;
				height: @fullHeight;
				// background-color: white;
				transform: translateX(40%);
				padding-right: 1%;
				.PositionLayout(relative);
			}
		}

		#split-images {
			width: @fullWidth;
			height: 200px;
			//background-color: skyblue;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			.PositionLayout(relative);
		}

		#typebar {
			width: @fullWidth;
			height: 50px;
			//background-color: skyblue;
			.PositionLayout(relative);
			.flexLayout;

			a {
				text-decoration: none;
				color: var(--color-content-a, '#4c4c4c');
				padding-left: 5px;

				&:hover {
					color: orangered;
				}
			}

			#typebar-leftnav {
				height: @fullHeight;
				// background-color: skyblue;
				transform: translateX(37%);
				padding-right: 1%;
				.PositionLayout(relative);

				.leftnav-font {
					width: 100px;
					height: auto;
				}
			}

			#typebar-rightnav {
				height: @fullHeight;
				// background-color: white;
				transform: translateX(22%);
				.PositionLayout(relative);

				.rightnav-font {
					width: 90px;
					height: auto;
				}
			}
		}

		#content {
			width: @fullWidth;
			height: auto;
			background-color: var(--color-content);
			//background-color: var(--color-bg-3);
			.PositionLayout(relative);
			overflow: hidden;

			a {
				&:hover {
					opacity: 0.7;
				}
			}

			.recommend-effect {
				&:hover {
					transform: scale(1.01);
				}
			}

			.product-effect {
				&:hover {
					transform: scale(1.01);
				}
			}

			.bigImg {
				width: 450px;
				height: 230px;
				border-radius: 5px;
				padding-top: -10%;
				padding-bottom: 0%;
				//background-color: #fff;
			}

			.bigImg-time {
				//transform: translate(0%,0%);
				text-align: left;
				.tag-style {
					color: var(--color-text-1);
					border: 1px solid;
				}
			}
			
			.bigImg-price {
				//transform: translate(20%,15%);
				width: auto;
				text-align: right;
			}
			
			.bigImg-type{
				transform: translate(6%,-15%);
				.tag-style {
					font-weight: bold;
					&.blue{
						color: var(--color-text-1);
						background-color: lightskyblue;
						border: 1px solid;
						border-radius: 5px;
					}
					&.orange{
						color: var(--color-text-1);
						background-color: orange;
						border: 1px solid;
						border-radius: 5px;
					}
					&.pink{
						color: var(--color-text-1);
						background-color: hotpink;
						border: 1px solid;
						border-radius: 5px;
					}
				}
			}

			.normalImg {
				width: 220px;
				height: 130px;
				border-radius: 5px;
				padding-bottom: 45%;
				background-color: #fff;
			}
			
			.normalImg-time {
				transform: translate(0%,90%);
				text-align: left;
				.tag-style {
					color: #727374;
					background-color: rgb(232,232,232,1%);
					border: 1px solid;
					
					&.blue{
						color: deepskyblue;
						background-color: aliceblue;
					}
				}
			}
			
			.normalImg-price {
				transform: translate(0%,105%);
				width: auto;
				color: #000;
				text-align: left;
			}
			
			.normalImg-type{
				//transform: translate(0%,-10%);
				.tag-style {
					font-weight: bold;
					&.blue{
						color: var(--color-text-1);
						background-color: lightskyblue;
						border: 1px solid;
						border-radius: 5px;
					}
					&.orange{
						color: var(--color-text-1);
						background-color: orange;
						border: 1px solid;
						border-radius: 5px;
					}
					&.pink{
						color: var(--color-text-1);
						background-color: hotpink;
						border: 1px solid;
						border-radius: 5px;
					}
				}
			}

			.scale-up-center {
				-webkit-animation: scale-up-center 0.5s;
				animation: scale-up-center 0.5s;
			}

			@-webkit-keyframes scale-up-center {
				0% {
					-webkit-transform: scale(0.5);
					transform: scale(0.5);
				}

				100% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}

			@keyframes scale-up-center {
				0% {
					-webkit-transform: scale(0.5);
					transform: scale(0.5);
				}

				100% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}

			.scale-in-hor-center {
				-webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

			}

			@-webkit-keyframes scale-in-hor-center {
				0% {
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
					opacity: 1;
				}

				100% {
					-webkit-transform: scaleX(1);
					transform: scaleX(1);
					opacity: 1;
				}
			}

			@keyframes scale-in-hor-center {
				0% {
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
					opacity: 1;
				}

				100% {
					-webkit-transform: scaleX(1);
					transform: scaleX(1);
					opacity: 1;
				}
			}


			#left-carousel {
				width: 600px;
				height: 305px;
				padding-top: 2%;
				padding-left: 1%;
				.PositionLayout(relative);

				#carousel {
					width: @fullWidth;
					height: @fullHeight;
					.PositionLayout(relative);

					#image-title {
						width: @fullWidth;
						height: @fullHeight;
						color: #fff;
						padding-top: 5%;
					}
				}

			}

			#right-fourImages {
				width: 540px;
				height: 300px;
				//background-color: antiquewhite;
				padding-top: 1%;
				padding-left: 1%;
				.PositionLayout(relative);
			}

			.link-style {
				color: var(--color-content-a);

				&:hover {
					color: orangered;
				}
			}
		}

		#footer {
			width: @fullWidth;
			height: @fullHeight;
			//background-color: black;
			.flexLayout;
			justify-content: center;
			.PositionLayout(relative);
		}
	}